const myworker = new Worker('./worker.js');
const myworkerWasm = new Worker('./worker-wasm.js');

var vm = new Vue({
    el: "#app",
    data: {
        time: 0,
        list: [],
        loading: false
    },
    beforeMount: function () {
        this.showTime();
    },
    methods: {
        showTime() {
            let that = this;
            setInterval(function () {
                that.time = new Date().valueOf();
            }, 10);
        },
        showFileList() {
            let that = this;
            let selector = document.querySelector("#file");
            if (selector.files.length == 0) {
                return;
            }
            let list = [];
            for (let i = 0; i < selector.files.length; i++) {
                let file = selector.files[i];
                let o = {
                    file: file,
                    name: file.name,
                    size: (file.size / (1024 ** 3)).toFixed(2),
                    start: new Date().valueOf(),
                    useTime: 0,
                    per: 0,
                    md5: '--'
                };
                list.push(o);
                that.list = list;
            }
        },
        onStart1() {
            let that = this;
            this.loading = true;
            for (let i = 0; i < that.list.length; i++) {
                let o = that.list[i];
                o.md5 = "计算中...";
                let file = o.file;
                o.start = new Date().valueOf();
                getFileMd5(file, 1024 * 1024 * 10, function (per) {
                    o.per = per;
                    o.useTime = (new Date().valueOf() - o.start) / 1000;
                    that.checkOk();
                }).then(md5Str => {
                    o.md5 = md5Str;
                    o.useTime = (new Date().valueOf() - o.start) / 1000;
                    that.checkOk();
                });
            }
        },
        onStart2() {
            let that = this;
            this.loading = true;
            myworker.addEventListener('message', e => {
                // console.log(e.data);
                that.list = e.data;
                that.checkOk();
            });
            myworker.postMessage(this.list);
        },
        onStart3(){
            let that = this;
            this.loading = true;
            myworkerWasm.addEventListener('message', e => {
                // console.log(e.data);
                that.list = e.data;
                that.checkOk();
            });
            myworkerWasm.postMessage(this.list);
        },
        onStart4(){
            let that = this;
            this.loading = true;
            myworkerWasm.addEventListener('message', e => {
                // console.log(e.data);
                that.list = e.data;
                that.checkOk();
            });
            myworkerWasm.postMessage(this.list);
        },
        checkOk() {
            let o = this.list.find(t => t.per < 100);
            this.loading = o ? true : false;
        }
    }
});